<template>
    <div class="container-content">
        <div class="container-content-title">{{ $t('platform.setting.ui.title') }}
            <el-button type="text" class="p-0" @click="dialogUpdate">{{ $t('action.edit') }}</el-button>
        </div>
        <el-form label-width="180px" class="detail">
            <el-row>
                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.ui.oem')">
                        <el-tag effect="plain" size="mini" type="info" v-if="data.oem != null">{{ data.oem }}</el-tag>
                        <component-page-loading status="nodata" v-else></component-page-loading>
                    </el-form-item>
                </el-col>

                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.ui.url_index_type')">
                        <div v-if="data.url_index != null">{{ $t(`platform.setting.ui.url_index.${data.url_index}.label`) }}</div>
                        <component-page-loading status="nodata" v-else></component-page-loading>
                    </el-form-item>
                </el-col>

                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.ui.index_logo_type')">
                        <div v-if="data.index_logo != null">{{ $t(`platform.setting.ui.index_logo.${data.index_logo}.label`) }}</div>
                        <component-page-loading status="nodata" v-else></component-page-loading>
                    </el-form-item>
                </el-col>

                <el-col :xl="12">
                    <el-form-item :label="$t('platform.setting.ui.open_lobby')">
                        <div v-if="data.open_lobby != null">{{ $t(`platform.setting.ui.open_lobby_list.${data.open_lobby}.label`) }}</div>
                        <component-page-loading status="nodata" v-else></component-page-loading>
                    </el-form-item>
                </el-col>
<!--                <el-col :xl="12">-->
<!--                    <el-form-item :label="$t('platform.setting.ui.return_type')">-->
<!--                        <div v-if="data.return_type != null">{{ $t(`platform.setting.ui.return_type_list.${data.return_type}.label`) }}</div>-->
<!--                        <component-page-loading status="nodata" v-else></component-page-loading>-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :xl="12" v-if="data.return_type == 2">-->
<!--                    <el-form-item :label="$t('platform.setting.ui.return_url')">-->
<!--                        <div v-if="data.return_url != null">{{ data.return_url }}</div>-->
<!--                        <component-page-loading status="nodata" v-else></component-page-loading>-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :xl="12">-->
<!--                    <el-form-item :label="$t('platform.setting.ui.more_game')">-->
<!--                        <div v-if="data.more_game != null">{{ $t(`platform.setting.ui.more_game_list.${data.more_game}.label`) }}</div>-->
<!--                        <component-page-loading status="nodata" v-else></component-page-loading>-->
<!--                    </el-form-item>-->
<!--                </el-col>-->
            </el-row>
        </el-form>
        <el-dialog :title="$t('platform.setting.ui.dialog.update')" width="440px" :visible.sync="dialog.visible.update">
            <div class="pr-12" style="min-height: 270px">
                <el-form label-width="auto" :model="dataCache">
                    <el-form-item :label="$t('platform.setting.ui.oem')" :error="Boolean(msg.errors['oem']) ? msg.errors['oem'][0] : ''">
                        <el-input v-model="dataCache.oem"></el-input>
                    </el-form-item>

                    <el-form-item :label="$t('platform.setting.ui.url_index_type')" :error="Boolean(msg.errors['url_index']) ? msg.errors['url_index'][0] : ''">
                        <el-select v-model="dataCache.url_index" class="block">
                            <el-option v-for="(item,index) in $t('platform.setting.ui.url_index')" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item :label="$t('platform.setting.ui.index_logo_type')" :error="Boolean(msg.errors['index_logo']) ? msg.errors['index_logo'][0] : ''">
                        <el-select v-model="dataCache.index_logo" class="block">
                            <el-option v-for="(item,index) in $t('platform.setting.ui.index_logo')" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item :label="$t('platform.setting.ui.open_lobby')" :error="Boolean(msg.errors['open_lobby']) ? msg.errors['open_lobby'][0] : ''">
                        <el-select v-model="dataCache.open_lobby" class="block">
                            <el-option v-for="(item,index) in $t('platform.setting.ui.open_lobby_list')" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
<!--                    <el-form-item :label="$t('platform.setting.ui.return_type')" :error="Boolean(msg.errors['return_type']) ? msg.errors['return_type'][0] : ''">-->
<!--                        <el-select v-model="dataCache.return_type" class="block">-->
<!--                            <el-option v-for="(item,index) in $t('platform.setting.ui.return_type_list_new')" :key="index" :label="item.label" :value="item.value"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item :label="$t('platform.setting.ui.return_url')" v-if="dataCache.return_type == 2"-->
<!--                                  :error="Boolean(msg.errors['return_url']) ? msg.errors['return_url'][0] : ''">-->
<!--                        <el-input v-model="dataCache.return_url"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item :label="$t('platform.setting.ui.more_game')" :error="Boolean(msg.errors['more_game']) ? msg.errors['more_game'][0] : ''">-->
<!--                        <el-radio-group v-model="dataCache.more_game">-->
<!--                            <el-radio :label="item.value" v-for="(item,index) in $t(`platform.setting.ui.more_game_list`)" :key="index">{{ item.label }}</el-radio>-->
<!--                        </el-radio-group>-->
<!--                    </el-form-item>-->
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">{{ $t('action.confirm') }}</el-button>
                        <el-button @click="dialog.visible.update = false">{{ $t('action.cancel') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "PlatformConfigUI",
    props: ['tree', 'config'],
    data() {
        return {
            data: {},
            dataInit: {
                oem: null, //游戏界面定制标识
                url_index: 0, //地址类型 0老地址 1新地址
                index_logo: 0, //logo类型 0不显示 1显示
                return_type: 0, //返回按钮类型：0不显示，1游戏大厅，2自定义地址
                open_lobby: 0, //开启大厅：0否，1是
                return_url: null, //游戏返回地址
                more_game: null, //显示更多游戏按钮：1是，2否。默认空为显示
            },
            dataCache: {},
            dialog: {
                visible: {
                    update: false,
                }
            },
            msg: {
                code: 200,
                message: '',
                errors: {},
            },
        }
    },
    watch: {
        config: {
            deep: true,
            immediate: true,
            handler(n, o) {
                // 初始化数据
                if (n.ui != null) {
                    this.data = _.cloneDeep(n.ui);
                } else {
                    this.data = _.cloneDeep(this.dataInit);
                }
                // 返回按钮类型【默认不显示】
                if (this.data.url_index == null) {
                    this.data.url_index = 0;
                }
                if (this.data.index_logo == null) {
                    this.data.index_logo = 0;
                }
                // 返回按钮类型【默认不显示】
                if (this.data.return_type == null) {
                    this.data.return_type = 0;
                }
                // 开启大厅【默认否】
                if (this.data.open_lobby == null) {
                    this.data.open_lobby = 0;
                }
                // 返回按钮类型【默认显示】
                if (this.data.more_game == null) {
                    this.data.more_game = 1;
                }
            }
        },
    },
    methods: {
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        // 显示模态框（编辑）
        dialogUpdate() {
            this.initMsg();
            // 缓存数据
            this.dataCache = _.cloneDeep(this.data);
            // 平台code
            this.dataCache.plat_code = this.tree.code;
            // 显示模态框
            this.dialog.visible.update = true;
        },
        onSubmit() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 清理数据
            if (this.dataCache.return_type != 2) {
                this.dataCache.return_url = null;
            }
            // 保存数据
            axios.post('/platform/setting/config/updateOrCreateByUi', this.dataCache).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.edit')}),
                        showClose: true
                    });
                    // 更新数据
                    this.data = response.data.resp_data;
                    // 关闭模态框
                    this.dialog.visible.update = false;
                } else if (response.data.resp_msg.code == 42000) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.edit')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style scoped>

</style>
